<template>
  <view class="goods-wrap">
    <!-- #ifdef APP-PLUS -->
    <view class="custom-navbar">
      <view class="navbar-left" @click="goBack">
        <u-icon name="arrow-left" color="#fff" size="44"></u-icon>
      </view>
      <view class="navbar-title">云购活动</view>
      <view class="navbar-right"></view>
    </view>
    <!-- #endif -->
    <view class="goods-info">
      <view class="goods-img">
        <image :src="cardDetails.good.image" mode="aspectFill" v-if="cardDetails"></image>
      </view>
      <view class="goods-name" v-if="cardDetails">{{ cardDetails.good.name }}</view>
      <view class="goods-remark" v-if="cardDetails">{{ cardDetails.good.remark }}</view>
      <view class="goods-content" v-html="cardDetails.good.content"></view>
      <view class="line"></view>
      <view class="goods-sub"><text>满员：</text>{{ cardDetails.people_num }}</view>
      <view class="goods-sub"><text>创建时间：</text>{{ cardDetails.create_time }}</view>
      <view class="line"></view>
      <view class="btns">
        <view>
          <u-button type="info" size="medium" @click="handleCancle">
            取消
          </u-button>
        </view>
        <view>
          <u-button type="primary" size="medium" :loading="loading" @click="handleClickBtn(cardDetails.good.id)">
            立即购买
          </u-button>
        </view>
      </view>
    </view>
  </view>
</template>
<script>
import {
  getSecondDetails,
  secondBuyPay,
} from "@/api/activity";
export default {
  name: 'CardDetails',
  data() {
    return {
      cardDetails: null,
      loading: false,
    }
  },
  onLoad(options) {
    console.log(options)
    let id = options.id;
    this.getData(id);
  },
  mounted() {

  },
  methods: {
    getData(id) {
      uni.showLoading({
        mask: true,
        title: '数据加载中...'
      })
      getSecondDetails(id).then(res => {
        uni.hideLoading();
        uni.stopPullDownRefresh();
        console.log(res);
        this.cardDetails = res.data;
      })
    },
    handleCancle() {
      uni.navigateBack({
        delta: 1
      })
    },
    handleClickBtn(id) {
      this.loading = true;
      let obj = {
        id
      }
      secondBuyPay(obj).then(res => {
        this.loading = false;
        console.log(res); 
        uni.showToast({
          title: res.msg,
          icon: 'success',
          duration: 2000,
          mask: true,
          success: () => {
            setTimeout(() => {
              uni.navigateBack({
                delta: 1
              })
            }, 2000);
          }
        })
      })
    },
  },
}
</script>
<style scoped lang="scss">
page {
  color: #fff;
  font-family: "PingFang SC", "Helvetica Neue", Arial, sans-serif;
}

.goods-wrap {
  padding-bottom: 60rpx;
  background: #F5F5F5;
  // height: 180vh;
  // margin-top: 110rpx;
}

.custom-navbar {
  height: 128rpx;
  padding-top: var(--status-bar-height);
  // background-image: linear-gradient(135deg, #ff2e2a 0%, #ff2e2a 100%);
  background: #0199fe;
  display: flex;
  align-items: center;
  padding-left: 30rpx;
  padding-right: 30rpx;
  box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.2);
  line-height: 100rpx;

  .navbar-left {
    width: 100rpx;
    display: flex;
    align-items: center;
  }

  .navbar-title {
    flex: 1;
    text-align: center;
    font-size: 36rpx;
    font-weight: bold;
    color: #fff;
    text-shadow: 0 2rpx 4rpx rgba(0, 0, 0, 0.3);
  }

  .navbar-right {
    width: 100rpx;
  }
}

.goods-info {
  padding: 30rpx;
  background: #fff;
  margin: 20rpx;
  box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.1);
  border-radius: 20rpx;
  overflow: hidden;
}

.goods-img {
  width: 100%;
  height: 400rpx;
  border-radius: 20rpx;
  overflow: hidden;
  margin-bottom: 20rpx;
}

.goods-img image {
  width: 100%;
  height: 400rpx;
  border-radius: 20rpx;
}

.goods-name {
  font-size: 40rpx;
  font-weight: bold;
  color: #333;
  line-height: 1.5;
}

.goods-remark {
  font-size: 30rpx;
  color: #666;
  line-height: 1.5;
  margin-top: 10rpx;
}

.goods-content {
  font-size: 30rpx;
  color: #666;
  line-height: 1.5;
  margin-top: 10rpx;
}

.line {
  height: 1rpx;
  background: #eee;
  margin-top: 20rpx;
}

.goods-sub {
  font-size: 30rpx;
  color: #666;
  line-height: 1.5;
  margin-top: 10rpx;
}

.goods-sub text {
  font-weight: bold;
  color: #333;
}

.btns {
  display: flex;
  text-align: center;
  justify-content: space-around;
  margin-top: 50rpx;
}

.btns view {
  flex: 1;
}
</style>